import { Button, Form, Input, Card, message } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { USER_API } from '../utils/api';
import { useAuth } from '../contexts/AuthContext';

interface LoginForm {
  username: string;
  password: string;
}

export default function Login() {
  const navigate = useNavigate();
  const location = useLocation();
  const { login } = useAuth();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: LoginForm) => {
    setLoading(true);
    try {
      const res = await fetch(USER_API.LOGIN, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(values),
      });

      if (!res.ok) {
        throw new Error(`HTTP ${res.status}`);
      }

      const result = await res.json();
      
      // 从响应头获取Authorization token
      const authHeader = res.headers.get('Authorization');
      if (!authHeader) {
        throw new Error('Authorization header not found in response');
      }
      
      // 通常Authorization头格式为 "Bearer <token>"，需要提取token部分
      const token = authHeader.startsWith('Bearer ') 
        ? authHeader.substring(7) 
        : authHeader;

      if (result.success) {
        message.success('登录成功');
        login(token, { 
          nickName: result.data?.nickname || result.data?.username || values.username,
          userName: result.data?.username || values.username,
          roles: [result.data?.role]
        });
        const from = location.state?.from?.pathname || '/';
        navigate(from, { replace: true });
      } else {
        message.error(result.message || '登录失败');
      }
    } catch (err) {
      console.error(err);
      message.error('登录失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      background: '#f0f2f5'
    }}>
      <Card 
        title="用户登录" 
        style={{ width: 400 }}
        // extra={<a onClick={() => navigate('/register')}>注册账号</a>}
      >
        <Form
          name="login"
          initialValues={{ remember: true }}
          onFinish={ onFinish }
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input prefix={ <UserOutlined /> } placeholder="用户名" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder="密码" />
          </Form.Item>
          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              style={{ width: '100%', marginBottom: 16 }}
            >
              登录
            </Button>
            或 <a onClick={() => navigate('/register')}>立即注册</a>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}